import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== antd
const Page 				= $Lazy.load(()=>import('#tp/page/page-container-scroll'))
const TableComponent 	=  	$Lazy.state(()=>import('./cpt/table-component'))
const Image 			=  	$Lazy.load(()=>import('@antd/image'))
//
const $cache 			= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		// 提交表单列表
		formData : [
			{ label: '标箱条码',			name: 'box_code', 		half:true, required:true },
			{ label: '医院名称录入',		name: 'is_hosp_name', 	half:true, type:'checkbox', onValue:({ value, formData })=>{
				if(value){
					formData[2].hide = false
					formData[3].hide = false
					formData[4].hide = true
					formData[5].hide = true
				}else{
					formData[2].hide = true
					formData[3].hide = true
					formData[4].hide = false
					formData[5].hide = false
				}
				this.formRef.setValue({ hosp_code:'', hosp_id:'', hosp_name:'' })
				this.setState({ formData })
			} },
			
			// 一组
			{ label: '医院名称',			name: 'hosp_id', 		half:true, type:'select', required:true, hide:true, copy:true, onChange:({rows})=>{
				if(rows){
					this.formRef.setValue({ hosp_code: rows.hosp_spec})
				}
			} },
			{ label: '医院条码',			name: 'hosp_code', 		half:true, disabled:true, p:'请先选择医院名称', hide:true, required:true},
			
			// 二组
			{ label: '医院条码',			name: 'hosp_code', 		half:true, required:true, onEnter: value =>{
				const { formData } = this.state
				const arr = formData[2].data.filter(v => v.hosp_spec === value )
				const hosp_name = $fn.hasArray(arr) ? arr[0].name : '无'
				this.formRef.setValue({ hosp_name })
			} },
			{ label: '医院名称',			name: 'hosp_name', 		half:true, disabled:true, p:'请先输入医院条码'},
			
			
			{ label: '批量录入',			name: 'checked', 		width:'25%', type:'checkbox', onChange:option => $fn.disabledToRows.call(this, option, 'end_code')},
			{ label: '加急',				name: 'critical', 		width:'25%', type:'checkbox' },
			{ label: '标本数量',			name: 'spec_num', 		half:true, mode:'number', value:1 },
			{ label: '开始条码号',		name: 'start_code', 	half:true, max:12, required:true, onEnter: val => this.getHospital() },
			{ label: '结束条码号',		name: 'end_code', 		half:true, p:'请输入12位数字条码号', disabled:true, max:12, required:true, onEnter: val => this.getHospital() },
			{ label: '标本性状',			name: 'spec_traits', 	half:true, type:'select', idStr:'code' },
			{ label: '识别标签',			name: 'tag', 			full:true, type: 'checkboxGroup', idStr:'code' },
			{ label: '备注',				name: 'remark', 		full:true, type:'textarea' },
		],
	}
	
	componentDidMount(){
		this.getSelect()
	}
	
	// 获取下拉数据
	getSelect = () => {
		const { formData } = this.state
		$cache.then( async f => {
			// 字典
			const dic = await f.getDicCache({ code:[21000, 69700 ] })
			// 标本性状
			$fn.setRow( formData, 'spec_traits', dic['21000'] )
			// 识别标签
			$fn.setRow( formData, 'tag', dic['69700'] )
			// 医院名称
			$fn.setRow( formData, 'hosp_id', await f.getCache({ api:'hospital' }) )
			//
			this.setState({ formData })
		})
	}
	
	// 回车自动带出医院 2021-9-26 4:10:29 ?F10: PM? --伍智睿
	getHospital = () => {
		const { start_code, end_code } = this.formRef.getValue()
		$http.submit(null,'/barcode/checkCodeEnter', { param:{start_code, end_code} }).then(({hosp_name, hosp_spec, uuid}) => {
			this.formRef.setValue({ hosp_name: hosp_name, hosp_code: hosp_spec, hosp_id: uuid })
		})
	}
	
	// 表格
	cols = [
		{ title: '条码信息',			dataIndex: 'spec_code' },
		TableControls.controls.call(this,{ width: 200 })
	]
	// 表格操作按钮
	table_controls = (text,rows) => {
		const { spec_code, index, app_upload_pic } = rows
		return [
			TableControls.click.call(this, '查看', ()=> this.setState({ img: $fn.getImagePrefix(app_upload_pic) }) , { disabled: !app_upload_pic }),
			// 上传
			TableControls.upload.call(this, value => {
				$http.submit(this,'specimen/upload',{ param: {file:value,spec_code} }).then(res=>{
					$fn.msg.success('上传图片成功')
					rows['app_upload_pic'] = value
					const { data } = this.state
					this.setState({ data, img: value ? $fn.getImagePrefix(value) : null })
				})
			}, { param:{ modular: 110, spec_code },isMsg:false }),
			// 删除
			TableControls.del.call(this, {  param:{spec_code}, api: 'specimen/cancelAddSpecimen', refresh:false, onOk:()=>{
				const { data } = this.state
				data.splice(index,1)
				this.setState({ data: $fn.copy(data), img:null })
			}})
		]
	}
	render(){
		return (
			<Page nobc title='录入条码信息'>
				<div className='fx bcf pt10 pr10' style={{height:465}}>
					{/* 表单 */}
					<div style={{width:'50%'}}>
						{ SubmitForm.call(this,{ msg:'保存', labelWidth:'s8', api:'specimen/add', enter:false, onOk:({data})=> {
							data.forEach((v,i)=>v.index = i)
							this.setState({ data })
							// 清空条码
							this.formRef.reset(['start_code','end_code'])
							// 刷新下方表格
							this.tableComponentRef.fetch()
						}, onForm: ref=>{
							ref.setValue({ spec_traits:'21002' })	// 设置标本性状默认
						}, hideButton:false, noEsc:true }) }
					</div>
					{/* 表格 */}
					<div className='fv ml10' style={{width:400, height:$fn.hasArray(this.state.data) ? 403 : 413}}>
						{ Table.call(this, { isIndex: true, hasBottom:false }) }
					</div>
					{/* 图片 */}
					<Image className='ex' height={403} src={this.state.img} />
				</div>
				{/* 其他参数 */}
				<TableComponent onRef={ ref => this.tableComponentRef = ref } {...this.props}/>
			</Page>
		)
	}
}

export default Index